<template>
  <div class="common-page f-c">
    <el-form inline>
      <el-form-item label="课程">
        <el-select v-model="searchParams.course_id">
          <el-option v-for="item in courseList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 15px" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <v-chart style="width: 100%;height: 500px" :option="option" />
    </div>
  </div>
</template>

<script>
import { http } from '@/api'
import { mapGetters } from 'vuex'
import { datetime } from '@/utils'
import crud from '@/mixins/crud'
export default {
  name: 'Page',
  mixins: [crud],
  computed: {
    ...mapGetters(['schoolList', 'courseList', 'classList', 'categoryList'])
  },
  data() {
    return {
      request: http.score,
      searchParams: {
        course_id: ''
      },
      option: {}
    }
  },
  methods: {
    initData() {
      if (!this.courseList.length) return this.$message.warning('请选择课程')
      if (!this.searchParams.course_id) {
        this.searchParams.course_id = this.courseList[0].id
      }
      this.request.page({
        ...this.getQueryParams(),
        pageSize: 99999
      }
      ).then(res => {
        this.loading = false
        this.totalSize = res.total
        const tableData = res.rows
        tableData.forEach(el => {
          if (el.created_at) {
            el.created_at = datetime(el.created_at)
          }
          el.total = (parseFloat(el.score1) * 0.4 + parseFloat(el.score2) * 0.6).toFixed(2)
        })

        const legend = [
          { name: '0-60', value: tableData.filter(el => el.total >= 0 && el.total <= 60).length },
          { name: '60-70', value: tableData.filter(el => el.total > 60 && el.total <= 70).length },
          { name: '70-80', value: tableData.filter(el => el.total > 70 && el.total <= 80).length },
          { name: '80-90', value: tableData.filter(el => el.total > 80 && el.total <= 90).length },
          { name: '90-100', value: tableData.filter(el => el.total > 90 && el.total <= 100).length }
        ]
        console.log('legend', legend)
        this.option = {
          tooltip: {
            show: true
          },
          legend: {
            bottom: 0
          },
          series: [
            {
              name: '成绩分析',
              type: 'pie',
              center: ['50%', '50%'],
              radius: ['40%', '65%'],
              clockwise: false, // 饼图的扇区是否是顺时针排布
              avoidLabelOverlap: false,
              data: legend
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-page {
  height:  100%;
}
</style>
